<template>
  <div class="home">
    {{ numobj.a }}
    {{ numobj.b }}
    {{ numobj.c }}
    {{ age }}
    <p>当前的积分是{{ num }}</p>
    <button @click="add">累计</button>
  </div>
</template>

<script>
// @ is an alias to /src
import * as numobj from "../utils/index";
import { ref, watchEffect, reactive, watch } from "vue";
export default {
  name: "HomeView",
  components: {},
  setup(props) {
    const num = ref(1000);
    let age = 10;
    const data = reactive({
      i: 0,
    });

    // 开始的时候会默认监听一次， watchEffect 监听的时候，不用指定具体的监听元素，只要在函数体里面使用了，就会默认监听
    // 只能监听到 相应的数据 proxy 类型的数据
    // watchEffect(() => {
    //   // console.log(num.value);
    //   // console.log(age);
    //   console.log(data.i);
    // });

    // watch 第一个参数是要监听的元素 第二个是回调函数 第三个参数 选项
    // 当 watch 监听的是一个 reactive 声明的对象的时候。(第一个参数要写成函数的形式)
    // watch(
    //   () => data.i,
    //   (newval, oldVal) => {
    //     console.log(newval);
    //     console.log(oldVal);
    //   },
    //   {
    //     immediate: true, // 已进入就立即监听
    //   }
    // );

    watch([num, () => data.i], ([newNum, newI], [oldNum, oldI]) => {
      console.log(newNum, newI);
      console.log(oldNum, oldI);
    });
    const add = () => {
      num.value++;
      age++;
      data.i++;
    };
    return {
      num,
      numobj,
      add,
      age,
    };
  },
  // directives: {},
  // beforeRouteLeave (to, from, next) {
  //   // ...
  // }
};
</script>
